import { Row, Col } from 'antd';
import React from 'react';

import { FirstHeaderC, MapEchartsC, SunEchartsC } from '../../comps';

import 'echarts/map/js/china.js';

class MapEcharts extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataList: [
        {
          name: '内蒙古',
          range: 1,
          size: 5,
          totalOrgan: 20,
          totalProduct: 129,
        },
        {
          name: '北京',
          range: 2,
          size: 4,
          totalOrgan: 16,
          totalProduct: 346,
        },
        {
          name: '四川',
          range: 3,
          size: 3,
          totalOrgan: 14,
          totalProduct: 110,
          selected: true,
        },
        {
          name: '上海',
          range: 4,
          size: 2,
          totalOrgan: 13,
          totalProduct: 134,
        },
        {
          name: '重庆',
          range: 6,
          size: 1,
          totalOrgan: 6,
          totalProduct: 39,
        },
      ],
      data1: undefined,
      data: [
        {
          name: '券池管理',
          children: [
            {
              name: '券池定义',
              // value: 57,
            },
            {
              name: '券池查询',
              children: [
                {
                  name: '债券',
                  value: 49,
                },
                {
                  name: '基金',
                  value: 75,
                },
              ],
            },
          ],
        },
        {
          name: '风险管理',
          children: [
            {
              name: '风险定义',
              // value: 64,
            },
            {
              name: '风险查询',
              children: [
                {
                  name: '风险股票',
                  value: 56,
                },
                {
                  name: '风险债券',
                  value: 49,
                },
              ],
            },
          ],
        },
        {
          name: '流动性管理',
          children: [
            {
              name: '券池定义',
              // value: 4,
            },
            {
              // value: 98,
              name: '流动性查询',
              children: [
                {
                  name: '流动性股票',
                  value: 56,
                },
                {
                  name: '流动性基金',
                  value: 35,
                },
              ],
            },
          ],
        },
        {
          name: '绩效管理',
          children: [
            {
              name: '绩效定义',
              value: 56,
            },
            {
              value: 98,
              name: '绩效查询',
            },
          ],
        },
      ],
      dataList1: undefined,
    };
  }

  clickData = (e) => {
    // 点击事件
    console.warn(e, '++++++++++++');
  };

  render() {
    setTimeout(() => {
      this.setState({
        dataList1: this.state.dataList,
        data1: this.state.data,
      });
    }, 3000);
    return (
      <div>
        <Row gutter={16}>
          <Col span={12}>
            <FirstHeaderC title='旭日图-异步加载' />
            <SunEchartsC data={this.state.data1} height='500px' />
          </Col>
          <Col span={12}>
            <FirstHeaderC title='异步加载' />
            <MapEchartsC
              dataList={this.state.dataList1}
              click={(e) => this.clickData(e)}
              //  width='100%'
              height='500px'
            />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <FirstHeaderC title='无数据' />
            <MapEchartsC dataList={[]} click={(e) => this.clickData(e)} width='100%' height='600px' />
          </Col>
          <Col span={12}>
            <FirstHeaderC title='正常加载' />
            <MapEchartsC
              dataList={this.state.dataList}
              click={(e) => this.clickData(e)}
              //  width='100%'
              defaultName='江苏'
              height='500px'
              toolTipInfo={(info) => {
                // 注意Echarts的formatter接受返回值是字符串 不能用jsx！！！！！！
                if (info) {
                  return `
                  <div>${info?.name}</div>
                  <div>累计机构数量: ${info?.totalOrgan}</div>
                  <div>累计产品数量: ${info?.totalProduct}</div>
                  `;
                }
                return null;
              }}
            />
          </Col>
        </Row>
        <Row gutter={16}>
          <Col span={12}>
            <FirstHeaderC title='旭日图-异步加载' />
            <SunEchartsC data={this.state.data} />
          </Col>
          <Col span={12}>
            <FirstHeaderC title='旭日图-无数据' />
            <SunEchartsC data={[]} />
          </Col>
        </Row>
      </div>
    );
  }
}

export default MapEcharts;
